import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';

import { Carousel } from 'antd';

import { getTopBannersAction } from '../../store/actionCreators';

import {
    BannerWrapper,
    BannerLeft,
    BannerRight,
    BannerControl
} from './style';

export default memo(function MusicTopBanner(){
     
    // 异步请求获取
     // 组件和redux关联：获取数据和进行操作
     const { topBanners } = useSelector(state => ({
        // topBanners: state.get('recommend').get('topBanners')
        // 取出recommend中的topBanners
        topBanners: state.getIn(['recommend', 'topBanners']),
    }), shallowEqual);
    const dispatch = useDispatch();

    // 发送网络请求
    useEffect(() => {
        dispatch(getTopBannersAction());
    },[dispatch]);

    
    // 处理轮播图显示逻辑
    const [ currentIndex, setCurrentIndex ] = useState(0);
    const bannerRef = useRef();
    const bannerChange = useCallback((from, to) => {
        setCurrentIndex(to);
    },[]);

    const bgImage = topBanners[currentIndex] && (topBanners[currentIndex].imageUrl + '?imageView&blur=40x20');




    return (
        <BannerWrapper bgImage={bgImage}>
            <div className="banner wrap-v2">
                <BannerLeft>
                <Carousel effect="fade" autoplay ref={bannerRef} beforeChange={bannerChange}>
                    {
                        topBanners.map((item, index) => {
                            return (
                                <div className="banner-item" key={item.imageUrl}>
                                    <img className="image" src={item.imageUrl} alt={item.typeTitle} />
                                </div>
                            )
                        })
                    }
                </Carousel>
                </BannerLeft>
                <BannerRight></BannerRight>
                <BannerControl>
                    <button className="btn left" onClick={e => bannerRef.current.prev()}></button>
                    <button className="btn right" onClick={e => bannerRef.current.next()}></button>
                </BannerControl>
            </div>
        </BannerWrapper>
    )
});
